<template>
  <div class="right-main">
    <!-- 搜索框 -->
    <header class="search-form">
      <div class="input-search">
        <span>部门名称:</span>
        <el-input
          v-model="department_name"
          label-width="120px"
          placeholder="请输入部门名称"
        />
      </div>
      <div class="btns">
        <el-button color="#6C52EA" icon="Search" @submit.native.prevent="" @click="handleQueryClick"
          >查询</el-button
        >
        <el-button icon="refresh" @click.stop="handleResetClick"> 重置 </el-button>
      </div>
    </header>
    <!-- 表格内容 -->
    <div class="content-table">
      <div class="content-title">
        <div class="title-name">部门管理</div>
        <div class="add-btn">
          <el-button
            v-if="usePermission('post.add')"
            color="#6C52EA"
            icon="Plus"
            @click.stop="handleAddClick"
          >
            增加部门
          </el-button>
          <el-button
            v-if="usePermission('post.add')"
            color="#6C52EA"
            icon="Plus"
            @click.stop="AddPositionClick"
          >
            增加岗位
          </el-button>
        </div>
      </div>
      <el-table
        :data="dataList"
        style="width: 100%"
        v-loading="loading"
        row-key="id"
        :header-cell-style="{
          background: 'rgb(250, 250, 250)',
          fontSize: '14px',
          fontWeight: '700',
          letterSpacing: '0px',
          lineHeight: '0px',
          color: 'rgba(55, 59, 69, 1)',
          textAlign: 'center'
        }"
        :cell-style="{
          fontSize: '14px',
          fontWeight: '400',
          letterSpacing: '0px',
          lineHeight: '0px',
          color: 'rgba(49, 53, 64, 1)',
          textAlign: 'center'
        }"
      >
        <el-table-column type="selection" width="55" />
        <template v-for="item in propList" :key="item.prop">
          <el-table-column v-bind="item" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row[item.prop]}}
            </template>
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              type="danger"
              size="small"
              :disabled="!usePermission('post.delete')"
              @click.stop="removeRow(scope.row.id)"
              >删除</el-button
            >
            <el-button
              link
              size="small"
              :disabled="!usePermission('post.updata')"
              @click.stop="handleChange(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹出框 -->
      <AddDialog
        :showAddPosition="showAddPosition"
        :dialog="dialog"
        @dialogClose="dialogClose"
        @dialogSave="dialogSave"
      ></AddDialog>
      <EditDialog
        :dialog="showEditDialog"
        :dialogData="dialogData"
        @edit-dialog-close="EditDialogClose"
        @dialog-edite-save="dialogEditeSave"
      ></EditDialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { propList } from '../config/content.config'
// import { getDepartmentList, deletePageData } from '@/apis/system/department'
import { ElMessage, ElMessageBox } from 'element-plus'

import AddDialog from './AddDialog.vue'
import EditDialog from './EditDialog.vue'

import { usePermission } from '@/hooks/usePermission'
import { deleteDepartmentData, getDepartmentList } from '@/apis/organization/department'

const props = defineProps({
  pageName: {
    type: String,
    required: true
  }
})

let department_name = ref('')


/**
 * @desc:获取人员信息
 * @param {Array} search 搜索
 */
const loading = ref(false)
let dataList = ref()
const getData = (search?: string) => {
  loading.value = true
  getDepartmentList({
    searchText: search
  }).then((res) => {
    if (!res) return
    dataList.value = res
    loading.value = false
  })
}

getData()

/**
 * @desc: 重置搜索框
 * @param {Array} search 搜索
 */
const handleResetClick = () => {
  department_name.value = ''
  getData()
}

const handleQueryClick = () => {
  getData(department_name.value)
}

/**
 * @desc:新增
 */
let dialog = ref(false)
const handleAddClick = () => {
  dialog.value = !dialog.value
}
const dialogClose = () => {
  dialog.value = !dialog.value
  showAddPosition.value = false
}

let showAddPosition = ref<boolean>(false)
const AddPositionClick = () => {
  dialog.value = !dialog.value
  showAddPosition.value = !showAddPosition.value
}

/**
 * @desc:新增弹窗点击保存按钮
 */
const dialogSave = () => {
  dialog.value = !dialog.value
  showAddPosition.value = false
  getData()
}

/**
 * @desc:删除
 */
const removeRow = (id: number) => {
  ElMessageBox.confirm('是否删除此条数据', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteDepartmentData(id)
        .then((res) => {
          if (res) {
            getData()
          }
        })
        .catch((res) => {
          ElMessage('服务器内部错误')
        })
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消'
      })
    })
}

/**
 * @desc:修改
 */
let dialogData = ref()
let showEditDialog = ref(false)
const handleChange = (res: object) => {
  dialogData.value = res
  showEditDialog.value = !showEditDialog.value
}
const EditDialogClose = () => {
  showEditDialog.value = !showEditDialog.value
}
const dialogEditeSave = () => {
  showEditDialog.value = !showEditDialog.value
  getData()
}
/**
 * @desc: 分页数量
 * @param {Number} size
 */
const onSize = (size: number) => {
  // pager.value.size = size
  getData()
}

/**
 * @desc: 切换页码
 * @param {Number} page
 */
const onPage = (page: number) => {
  // pager.value.page = page
  getData()
}
</script>

<style lang="less" scoped>
.right-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .search-form {
    background: #fff;
    border: 1px solid #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 8px;

    .input-search {
      display: flex;
      height: 30px;
      background: #fff;
      border: 1px solid #fff;

      .el-input {
        width: 250px;
        line-height: 30px;
      }

      span {
        width: 80px;
        line-height: 30px;
      }
    }
    .btns {
      .el-button {
        height: 28px;
        font-size: 13px;
      }
    }
  }

  .content-table {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    padding: 0 16px;

    .content-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;

      .title-name {
        color: rgba(0, 0, 0, 0.65);
        font-size: 18px;
        font-weight: 700;
      }

      .add-btn {
        .el-button {
          height: 28px;
          font-size: 13px;
        }
      }
    }
    .el-table {
      flex-grow: 1;
      height: 0 !important;
      flex-shrink: 0;
    }
    .content-footer {
      margin-top: 20px;
      padding: 8px;
    }
  }
}
</style>
